<script lang="ts" setup>
import type { IGetDictsRes } from '@/api/system/dict/type.ts'
import type { OperLog } from '@/api/system/operlog/type'
import { formatDate } from '@/utils/day'

const props = defineProps<{
	sysOperType: IGetDictsRes
}>()
const dialogForm = ref<OperLog>({})

function businessTypeFindLabel(val: string | number | undefined) {
	return props.sysOperType.find(item => Number(item.value) === Number(val))?.label
}

const visible = ref(false)

function init(rowData: OperLog) {
	visible.value = true
	dialogForm.value = { ...rowData }
}

defineExpose({
	init
})
</script>
<template>
	<el-dialog
		v-model="visible"
		title="操作日志详细"
		width="800px"
		append-to-body
		:close-on-click-modal="false"
		class="dialogContainer"
	>
		<el-form
			:model="dialogForm"
			label-width="100px"
		>
			<el-row>
				<el-col :span="12">
					<el-form-item label="操作模块：">
						{{ dialogForm.title }} / {{ businessTypeFindLabel(dialogForm.businessType) }}
					</el-form-item>
					<el-form-item label="登录信息："> {{ dialogForm.operName }} / {{ dialogForm.operIp }} </el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="请求地址：">{{ dialogForm.operUrl }}</el-form-item>
					<el-form-item label="请求方式：">{{ dialogForm.requestMethod }}</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="操作方法：">{{ dialogForm.method }}</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="请求参数：">
						<div class="overflow-auto">{{ dialogForm.operParam }}</div>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="返回参数：">{{ dialogForm.jsonResult }}</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="操作状态：">
						<div v-if="dialogForm.status === 0">正常</div>
						<div v-else-if="dialogForm.status === 1">失败</div>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="消耗时间：">{{ dialogForm.costTime }}毫秒</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="操作时间：">{{ formatDate(dialogForm.operTime) }}</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item
						v-if="dialogForm.status === 1"
						label="异常信息："
					>
						{{ dialogForm.errorMsg }}
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="visible = false">关 闭</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<style lang="scss" scoped></style>
